<template>
  <dv-border-box-12 class="box">
    <div :id="id" :style="{height,width} " />
  </dv-border-box-12>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
// import resize from '@/components/Charts/mixins/resize'
export default {
  // mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
      // default: '300px'
    },
    height: {
      type: String,
      default: '325px'
    }
  },
  data() {
    return {
      chart: null,
      flag: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      // this.updateChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /* updateChart() {
      fetchRegionData().then((res) => {
        this.regionData = res.data.regionData
        this.chart.setOption({
          series: [
            {
              data: this.regionData.sort((a, b) => {
                return a.value - b.value
              })
            }
          ]
        })
      })
    },*/
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      this.chart.setOption({
        title: {
          text: '测试标题',
          top: '9%',
          left: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        legend: {
          // bottom: 10,
          top: 60,
          left: 20,
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          top: 90,
          left: '15%',
          right: '15%'
        },
        angleAxis: {},
        radiusAxis: {
          show: false,
          nameTextStyle: {
            fontSize: 1
          },
          type: 'category',
          data: ['保护侧电位', '为保护侧电位', '南北地电位梯度', '东西地电位梯度'],
          z: 10
        },
        tooltip: {},
        polar: {
          radius: '60%'
        },
        series: [
          {
            type: 'bar',
            data: [1, 2, 3, 4],
            coordinateSystem: 'polar',
            name: 'A',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [2, 4, 6, 8],
            coordinateSystem: 'polar',
            name: 'B',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [1, 2, 3, 4],
            coordinateSystem: 'polar',
            name: 'C',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
.box {
  /*box-shadow: 0 4px 8px 0 rgba(31, 29, 29, 0.2);*/
  box-shadow: 0 8px 16px 0 rgb(21, 20, 20);
  transition: 0.3s;
  width: 100%;
  border-radius: 10px;
  /*background-color: #2c3e50;*/
  /*background-color: #536170;*/
  /*background-color: #162d7d;*/
}
.box:hover {
  /*box-shadow: 0 8px 16px 0 rgb(21, 20, 20);*/
}
</style>
